import React, {Component} from 'react';
import {connect} from 'react-redux';
import {setToken} from "../../actions";
import PropTypes from 'prop-types';
import ContainerItem from '../../components/ContainerItem/ContainerItem';
import Card from '../../components/Card/Card';
import Situation from '../../components/Situation/Situation';
import RadioGroup from '../../components/RadioGroup/RadioGroup';
import {Row,Col} from 'antd';
import './Home.css';
import { Bar } from '@antv/g2plot';
import {setSelectedKey} from "../../actions";


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            token: '',
            collapsed: false,
            recordList:[
                {
                    title:'商品总量',
                    count:'187',
                    description:'当前商品总数量',
                    icon:'gift',
                    color1:'#2f9de2',
                    color2:'#57bdbf'
                },
                {
                    title:'用户总量',
                    count:'209',
                    description:'当前用户总数量',
                    icon:'user',
                    color1:'#fb2c95',
                    color2:'#ff7d7d'
                },
                {
                    title:'订单总量',
                    count:'7',
                    description:'已付款订单总数量',
                    icon:'file-protect',
                    color1:'#925cc3',
                    color2:'#c543d8'
                },
                {
                    title:'评价总量',
                    count:'1',
                    description:'订单评价总数量',
                    icon:'meh',
                    color1:'#f39526',
                    color2:'#ecca1b'
                }
            ],
            situationList:[
                {
                    title:'销售额（元）',
                    count:'187',
                    description:'0.00',
                    icon:'gift',
                },
                {
                    title:'支付订单数',
                    count:'209',
                    description:'0',
                    icon:'user',
                },
                {
                    title:'新增用户数',
                    count:'7',
                    description:'0',
                    icon:'file-protect',
                },
                {
                    title:'下单用户数',
                    count:'1',
                    description:'0',
                    icon:'meh',
                }
            ]
        };
    }

    render() {
        const {recordList,situationList}=this.state;
        return (
            <div>
                <RadioGroup name={'test'}>
                    <label><input type={'radio'}/>test</label>
                    <label><input type={'radio'}/>test</label>
                    <label><input type={'radio'}/>test</label>
                </RadioGroup>
                <ContainerItem title={"商城统计"}>
                    <Row gutter={16}>
                        {
                            recordList.map((item,index)=>{
                                return(
                                    <Col xs={24} sm={24} lg={12} xl={6} key={index}>
                                        <Card item={item}/>
                                    </Col>
                                )
                            })
                        }
                    </Row>
                </ContainerItem>
                <div style={{marginTop:'20px'}}>
                    <ContainerItem title={'实时概况'}>
                        <Row gutter={16}>
                            {
                                situationList.map((item,index)=>{
                                    return(
                                        <Col xs={24} sm={24} lg={12} xl={6} key={index}>
                                            <Situation item={item}/>
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                    </ContainerItem>
                </div>
                <div style={{marginTop:'20px'}}>
                    <ContainerItem title={'近七日交易走势'}>
                        <div id="container"></div>
                    </ContainerItem>
                </div>
            </div>
        )
    }

    componentDidMount() {
        this.props.dispatch(setSelectedKey('/index/home'));
        const data = [
            { year: '1951 年', sales: 38 },
            { year: '1952 年', sales: 52 },
            { year: '1956 年', sales: 61 },
            { year: '1957 年', sales: 145 },
            { year: '1958 年', sales: 48 },
        ];

        const bar = new Bar(document.getElementById('container'), {
            data,
            xField: 'sales',
            yField: 'year',
            colorField: 'year',
        });

        bar.render();
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
}

const mapStateToProps = (state, ownProps) => {
    return {
        token: state.setToken
    }
};
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        setToken: token => {
            dispatch(setToken(token));
        },
        dispatch
    }
};
Home.propTypes = {
    token: PropTypes.string.isRequired,
    setToken: PropTypes.func.isRequired
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Home);
